<template>
  <div>
    <el-table
      :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      row-class-name="pointer">
      <EmptyPlaceholder slot="empty" mode="table" style="padding-bottom: 0;" />
      <el-table-column align="left" label="订单类型" width="80">
        <template slot-scope="scope">
          <div :style="{background: orderTypeFilter(scope.row.orderType).bg || 'rgb(253, 239, 233)', color: orderTypeFilter(scope.row.orderType).color || 'rgb(253, 133, 70)'}" class="order-type">
            {{ scope.row.orderType | orderTypeStatusFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="订单编号" width="220">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.orderId" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.orderId }}</div>
            <div class="ellipsisOne" style="cursor:pointer;color:#406EFF" @click="goDetail(scope.row.id)">{{ scope.row.orderId || '--' }} </div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单日期" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.orderTime">{{ scope.row.orderTime | format('YYYY/MM/DD') }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="right" label="刊例价(元)" min-width="100">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.articlesPrice" :price="scope.row.articlesPrice / 100" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="折扣" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.discountPrice || scope.row.discountPrice === 0">{{ scope.row.discountPrice | moneyFilter }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="含税金额(元)" min-width="110">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.taxAmount" :price="scope.row.taxAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="right" label="已核销金额(元)" min-width="120">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.completeWriteOffAmount" :price="scope.row.completeWriteOffAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="逾期天数" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.overdueDayNum" style="color:#FF504F;">{{ scope.row.overdueDayNum || '0' }}</span>
          <span v-else style="color:#FF504F;">0</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="订单状态" min-width="100">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center">
            <div v-if="scope.row.orderStatus || scope.row.orderStatus === 0" :style="scope.row.orderStatus === 1?{backgroundColor: '#31CC9C'}:{backgroundColor: '#FD8546'}" class="dot"/>
            <span v-if="scope.row.orderStatus || scope.row.orderStatus === 0">{{ scope.row.orderStatus | orderStatusFilter }}</span>
            <span v-else>--</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="账号" min-width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.orderType !== 6">
            <el-tooltip v-if="scope.row.resourceName" :open-delay="800" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.resourceName }}</div>
              <div class="ellipsisOne">{{ scope.row.resourceName }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </div>
          <span v-else>包含多个账号</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单平台" min-width="160">
        <template slot-scope="scope">
          <div class="flex-center" style="color: #999">
            <platformIcon :data="scope.row.orderPlatform" />
            {{ scope.row.orderPlatform || '--' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="品牌名称" min-width="100">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.theme && scope.row.theme.length > 5" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.theme }}</div>
            <div class="theme ellipsisOne">{{ scope.row.theme }}</div>
          </el-tooltip>
          <div v-else class="theme ellipsisOne">{{ scope.row.theme || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="文案内容" min-width="100">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.content && scope.row.content.length > 5" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.content }}</div>
            <div class="theme ellipsisOne">{{ scope.row.content }}</div>
          </el-tooltip>
          <div v-else class="theme ellipsisOne">{{ scope.row.content || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单链接" min-width="120">
        <template slot-scope="scope">
          <a v-if="isLink(scope.row.orderLink)" :href="scope.row.orderLink" style="color: #406EFF;display:flex;align-items:center;cursor: pointer;" target="_blank"><i class="el-icon-link" />链接</a>
          <div v-else>{{ scope.row.orderLink || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="客户名称" min-width="180">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.clientName" :open-delay="800" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.clientName }}</div>
            <div class="ellipsisOne">{{ scope.row.clientName }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="联系人" min-width="120">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.contactPerson" :open-delay="800" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.contactPerson }}</div>
            <div class="ellipsisOne">{{ scope.row.contactPerson }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="销售" min-width="100">
        <template slot-scope="scope">
          <CheckUserInfo v-if="scope.row.marketId" :user-id="scope.row.marketId" :label="scope.row.market" />
          <el-tooltip v-else-if="scope.row.market" :open-delay="800" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.market }}</div>
            <div class="ellipsisOne">{{ scope.row.market }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="核销状态" min-width="100">
        <template slot-scope="scope">
          <StatusText :color="['#999', '#31cc9c', '#406eff','#FF504F'][scope.row.accountState]" :text="scope.row.accountState | setAccountState" />
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="orderList.length"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, pager, jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
// img
import originalOrder from '@/assets/originalOrder.png';
import adjustOrder from '@/assets/adjustOrder.png';
import hedgingOrder from '@/assets/hedgingOrder.png';
import retorOrder from '@/assets/retorOrder.png';
import splitOrder from '@/assets/splitOrder.png';
import newOrder from '@/assets/newOrder.png';

import { orderTypeStatusFilter, setAccountState } from '@/filters/status';
import { format } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
import { mapState } from 'vuex';

import ResourceInfo from '@/components/ResourceInfo';
import platformIcon from '@/components/Common/platformIcon';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
export default {
  filters: { orderTypeStatusFilter, setAccountState, moneyFilter, format,
    orderStatusFilter(status) {
      const arr = ['草稿中', '待发布', '待核算', '待审批', '待封账', '封账中', '已封账', '已完成'];
      return arr[Number(status)];
    }
  },
  components: { ResourceInfo, platformIcon, EmptyPlaceholder },
  props: {
    orderList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    total: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 20
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    orderTypeFilter(type) {
      const arr = [
        { type: 0, img: originalOrder, bg: '#FDEFE9', color: '#FD8546' },
        { type: 1, img: splitOrder, bg: '#D9F9EF', color: '#31CC9C' },
        { type: 2, img: hedgingOrder, bg: '#FFEAF4', color: '#FF6573' },
        { type: 3, img: newOrder, bg: '#F9ECFF', color: '#9B5BED' },
        { type: 4, img: retorOrder, bg: '#FFF2DF', color: '#F99B2D' },
        { type: 5, img: adjustOrder, bg: '#EEF1FE', color: '#406EFF' },
        { type: 6, img: originalOrder, bg: '#FDEFE9', color: '#FD8546' }
      ];
      return arr[type] || {};
    },
    isLink(data) {
      const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)([A-Za-z0-9-~]+)/;
      if (reg.test(data)) {
        return true;
      }
      return false;
    },
    goDetail(id) {
      const routeUrl = this.$router.resolve({
        name: 'orderDetail',
        params: { orderId: id }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.order-type {
    width:56px;
    height:20px;
    font-size: 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
  .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
